<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="theme-color" content="#5E12F8">

    <link rel="stylesheet" href="./files/bootstrap.min.css">
    <link rel="stylesheet" href="./files/jquery-ui.css">
    <link rel="stylesheet" href="./files/owl.carousel.min.css">
    <link rel="stylesheet" href="./files/slicknav.min.css">
    <link rel="stylesheet" href="./files/magnificpopup.css">
    <link rel="stylesheet" href="./files/jquery.mb.YTPlayer.min.css">
    <link rel="stylesheet" href="./files/typography.css">
    <link rel="stylesheet" href="./files/style.css">
    <link rel="stylesheet" href="./files/responsive.css">
    <script src="board/common/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="board/common/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="board/common/css/fontello.css" />
    <link rel="stylesheet" href="./files/themes.css">
    <script type="text/javascript" src="board/common/jquery-1.11.3.min.js"></script>
    <script async="" src="./files/js" type="text/javascript"></script>
    <script src="board.js" type="text/javascript"></script>
    <script src="./board/common/markdown/marked.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="interface-config.js"></script>
    <script type="text/javascript">
      if (MixlyConfig.softwareConfig.hasOwnProperty("version")
        && document.title.indexOf(MixlyConfig.softwareConfig["version"]) == -1) {
        document.title = MixlyConfig.softwareConfig["version"];
      }
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-109124274-1');

      var indexText = null;

      if ('localStorage' in window && window['localStorage'] != null && window.localStorage["Language"]) {
        let winLang = window.localStorage["Language"];
        if (winLang === "en") {
          indexText = {
            "设置": "Setting",
            "进度": "Progress",
            "编辑url": "Edit url",
            "名称": "Name",
            "版本": "Version",
            "介绍": "introduction",
            "云端导入": "Cloud import",
            "本地导入": "Local import",
            "信息": "information",
            "添加url": "Add url",
            "云端板卡": "Cloud board",
            "导入板卡": "Import board",
            "请选择至少一块云端板卡": "Please select at least one cloud card",
            "解压中": "Unzipping",
            "导入成功": "Import successful",
            "导入失败，请检查网络": "Import failed, please check the network"
          };
        } else if (winLang === "zh-hant") {
          indexText = {
            "设置": "設置",
            "进度": "進度",
            "编辑url": "編輯url",
            "名称": "名稱",
            "版本": "版本",
            "介绍": "介紹",
            "云端导入": "雲端導入",
            "本地导入": "本地導入",
            "信息": "信息",
            "添加url": "添加url",
            "云端板卡": "雲端闆卡",
            "导入板卡": "導入闆卡",
            "请选择至少一块云端板卡": "請選擇至少一塊雲端闆卡",
            "解压中": "解壓中",
            "导入成功": "導入成功",
            "导入失败，请检查网络": "導入失敗，請檢查網絡"
          };
        }
      }
      if (!indexText) {
        indexText = {
          "设置": "设置",
          "进度": "进度",
          "编辑url": "编辑url",
          "名称": "名称",
          "版本": "版本",
          "介绍": "介绍",
          "云端导入": "云端导入",
          "本地导入": "本地导入",
          "信息": "信息",
          "添加url": "添加url",
          "云端板卡": "云端板卡",
          "导入板卡": "导入板卡",
          "请选择至少一块云端板卡": "请选择至少一块云端板卡",
          "解压中": "解压中",
          "导入成功": "导入成功",
          "导入失败，请检查网络": "导入失败，请检查网络"
        };
      }
    </script>
    <script src="./files/gen_validatorv4.js" type="text/javascript"></script>
    <meta name="theme-color" content="#1b173d">

    <link rel="shortcut icon" type="image/ico" href="./files/mixly.ico">
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
          <![endif]-->
  </head>
  <body data-gr-c-s-loaded="true">
    <style>
      .container {
        width: 90%;
      }

      .blue_icons {
        filter: invert(13%) sepia(24%) saturate(1450%) hue-rotate(207deg) brightness(93%) contrast(105%);
      }

      .slider-area {
        height: 390px !important;
      }

      * {
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    </style>
    <script type="text/javascript">
      $(window).scroll(function () {
        if ($(window).scrollTop() >= 50) {
          $('.header-area').css('background', '#1B173D');
        } else {
          $('.header-area').css('background', 'transparent');
        }
      });
    </script>
    <section class="slider-area" id="home">
      <div class="container">
        <div class="col-md-6 col-sm-6 hidden-xs">
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="row">
            <div class="slider-inner text-right">
              <b>
                <h2>Mixly</h2>
              </b>
              <h5>Make Programming Easier</h5>
            </div>
          </div>
        </div>
      </div>
    </section>
    <style>
      #add-board:hover {
        -webkit-transform: rotate(0deg) scale(1.2) !important;
        transform: rotate(1deg) scale(1.2) !important;
      }

      .service-single img:hover {
        -webkit-transform: rotate(0deg) scale(1.025);
        transform: rotate(-3deg) scale(1.025);
      }

      .service-single:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, .3);
      }
    </style>
    <div class="service-area" id="board-area" style="padding-left: 0px;padding-right: 0px;">
      <div class="container" style="width:100%;padding-left: 0px;padding-right: 0px;">
        <div class="layui-carousel" id="board_switch" lay-filter="board_switch"
          style="background-color:rgba(0,0,0,0);padding-left: 0px;padding-right: 0px;">
          <div id="mixly-board" carousel-item="" style="background-color:rgba(0,0,0,0);">
          </div>
        </div>
      </div>
    </div>
    <footer id="footer" role="contentinfo" style="position: absolute; bottom: 0px;left: 0px;width: 100%;"></footer>
    <script src="board-init.js" type="text/javascript"></script>
    <script src="cloud-boards.js" type="text/javascript"></script>
    <div id="import-board" style="display: none;height: 100%;">
      <div class="layui-hide" id="import-board-page" lay-filter="import-board-page"></div>
    </div>

    <div id="cloud-boards-download-form" class="layui-form layui-form-pane"
      style="display:none;position:relative;height:100%;">
      <div class="layui-form-item layui-form-text"
        style="position:absolute;margin-bottom:20px;margin-top: 20px;left:10px;right:10px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="download-percent">
          <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
      </div>
      <div class="layui-form-item layui-form-text"
        style="position:absolute;top:58px;left:0px;bottom:0px;width:100%;margin-bottom:0px;">
        <label id="download-imformation" class="layui-form-label">信息</label>
        <div class="layui-input-block" style="position:absolute;top:38px;left:0px;bottom:0px;width:100%;">
          <textarea id="cloud-boards-download-message" wrap="off" spellcheck="false" class="layui-textarea"
            style="width:100%;height:100%;resize:none;"></textarea>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      document.getElementById("download-imformation").innerHTML = indexText["信息"];
    </script>
  </body>
</html>